<html>
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>websocket测试</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        h3,h4{
            text-align:center;
        }
        .headImg{
        	width: 50px;
        	height: 50px;
        	border-radius: 70px;
        }
        .headImg_off{
		    -webkit-filter: grayscale(100%);
		    -moz-filter: grayscale(100%);
		    -ms-filter: grayscale(100%);
		    -o-filter: grayscale(100%);
		    filter: grayscale(100%);
		    filter: gray;
        }
        .friends_div{
        	display: flex;
        	align-items: center;
        	margin-top: 10px;
        }
        .friends_div_01{
        	display: flex;
        	flex-flow: column;
        	margin-left: 10px;
        }
    </style>
</head>
<body>

<h3>WebSocket测试，客户端接收到的消息如下：</h3>

<div style="width: 700px;height: 500px;display: flex;">
	<div style="width: 506px;height: 100%;background-color: white;border: solid;">
		<div style="width: 100%;"><span id="username"></span></div>
		<textarea id = "messageId" readonly="readonly" cols="60" rows="25" ></textarea>
		<div style="width: 100%;height: 30px;">
			<textarea id = "sendMessageArea" cols="60" rows="4" ></textarea>
			<button onclick="sendMessage()">发送</button>
		</div>
	</div>
	<div style="width: 174px;margin-left: 20px;background-color: white;">
		<div class="friends_div" onclick="initiateDialogue('shily001')">
			<img id="shily001" class="headImg headImg_off" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-5bcf79fce14ac8c7ed2e1584bb7015b0_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624693110&t=96a62cd50737c9b5f1c1c84e24733079">
			<div class="friends_div_01">
				<span>雪花</span>
				<span style="margin-top: 5px;">shily001</span>
			</div>
		</div>
		<div class="friends_div" onclick="initiateDialogue('shily002')">
			<img id="shily002" class="headImg headImg_off" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4094106402,3378912480&fm=26&gp=0.jpg">
			<div class="friends_div_01">
				<span>小新</span>
				<span style="margin-top: 5px;">shily002</span>
			</div>
		</div>
		<div class="friends_div" onclick="initiateDialogue('shily003')">
			<img id="shily003" class="headImg headImg_off" src="">
			<div class="friends_div_01">
				<span>飞扬</span>
				<span style="margin-top: 5px;">shily003</span>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var username = decodeURI(window.location.href).split("?username=")[1];	
    var socket, to;
    if (typeof (WebSocket) == "undefined") {
        console.log("遗憾：您的浏览器不支持WebSocket");
    } else {
        console.log("恭喜：您的浏览器支持WebSocket");
        //实现化WebSocket对象
        //指定要连接的服务器地址与端口建立连接
        //注意ws、wss使用不同的端口。我使用自签名的证书测试，
        //无法使用wss，浏览器打开WebSocket时报错
        //ws对应http、wss对应https。
        //socket = new WebSocket("ws://localhost:8080/ws/asset");
        socket = new WebSocket("wss://im.dev.sdmyb.com/ws");       
      	//连接打开事件
        socket.connect;     
        //连接打开事件
        /* socket.onopen = function() {
            console.log("Socket 已打开");
            var jsonObj = {
                	'type': 0,
                	'from': username
                }
            socket.send(JSON.stringify(jsonObj));
        }; */
        //收到消息事件
        socket.onmessage = function(msg) {
        	console.log(msg.data);
        	var jsonObj = JSON.parse(msg.data);
        	if(jsonObj.type == 0){
        		var img = document.getElementById(jsonObj.from)
        		if(img){
        			img.classList.remove("headImg_off");
        		}
        	}else if(jsonObj.type == 99){
        		var img = document.getElementById(jsonObj.from)
        		if(img){
        			img.classList.add("headImg_off");
        		}
        	}else{
        		 $("#messageId").append(jsonObj.msg + '<--' + jsonObj.from + "\n");
        		 to = jsonObj.from
        		 document.getElementById("username").innerHTML=to;
        	}
            
        };
        //连接关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
        }
        //窗口关闭时，关闭连接
        window.unload=function() {
            socket.close();
        };
    }
    function sendMessage() {
		/* var msg = document.getElementById("sendMessageArea").value;
		var jsonObj = {
            	'type': 1,
            	'from': username,
            	'to': to,
            	'msg': msg
            }
		socket.send(JSON.stringify(jsonObj));
		$("#messageId").append(msg + '-->' + username + "\n"); */
    	var jsonObj = { uri: '/login', params: {'appid':'test'}, key: 'test' }
    	socket.send(JSON.stringify(jsonObj));
	}
    function initiateDialogue(username) {
		to = username;
		document.getElementById("username").innerHTML=to;
	}
</script>

</body>
</html>